<template>
  <div class='u-skuDialog'>
    <el-dialog
      title="选择商品"
      :visible.sync="dialogVisible"
      :before-close="close">
      <el-form :inline='true' label-width='80px' class='form'>
        <el-form-item label='商品名称' class='form-item'>
          <el-input v-model.trim='name' />
        </el-form-item>
        <attr-search
          ref='attrSearch' aType='2'
        />
        <el-form-item>
          <el-button @click='clear'>清空</el-button><el-button type='primary' @click='search'>搜索</el-button>
        </el-form-item>
      </el-form>
      <a-table :data='data' :cols='tableKeys'>
        <el-table-column align="center" label="名称" min-width="80">
          <template slot-scope="scope">
            <div :class="selectSkuIds.includes(scope.row.key_id) ? 'on' : ''">
              {{ (scope.row.name || scope.row.short_name) + scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="80">
          <template slot-scope="scope">
            <div>
              <el-button size='mini' @click='choose(scope.row)'>选择</el-button>
            </div>
          </template>
        </el-table-column>
      </a-table>
      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
      </div>
      <div class='u-skuDialog-btn'>
        <!-- <el-button type='primary' @click='comfirm'>确定</el-button> -->
        <el-button type='primary' @click='close'>关闭窗口</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AttrSearch from '@/components/business/AttrSearch'

export default {
  name: 'u-skuDialog',

  props: ['selectSkuIds', 'isNotUseSkuId'],

  components: {
    AttrSearch
  },

  data() {
    return {
      tableKeys: [],
      data: [],
      cacheData: [],
      dialogVisible: false,
      name: '',
      colorList: [],
      selectColor: '',
      goodsList: [],
      selectGoods: '',
      // 临时选择 id，以供添加或者修改时，可以随意选择
      cacheId: '',
      cacheObj: {}
    }
  },

  mounted() {
    console.log(this.selectSkuIds)
  },

  watch: {
    selectSkuIds() {
      console.log('update')
      this.data = this.cacheData.filter(v => {
        return !(this.selectSkuIds.includes(v.key_id) || v.key_id === this.cacheId)
      })
    },
    cacheId() {
      console.log('update')
      this.data = this.cacheData.filter(v => {
        return !(this.selectSkuIds.includes(v.key_id) || v.key_id === this.cacheId)
      })
    }
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      const params = {
        aPageNum,
        aPageSize,
        aAttrs: this.$refs.attrSearch.getData(),
        aMerchantId: this.aFirmId
      }
      if (this.name) params.aName = this.name
      return this.$api.supplyGetMySkus(params)
    },

    getData(data) {
      this.data = data.map(v => ({
        ...v,
        id: v.staff_id || v.id,
        key_id: this.isNotUseSkuId ? v.id : v.sku_id
      }))
      this.cacheData = JSON.parse(JSON.stringify(this.data))
      this.data = this.data.filter(v => {
        return !(this.selectSkuIds.includes(v.key_id) || v.key_id === this.cacheId)
      })
    },

    search() {
      this.$refs.page.changePage()
    },

    clear() {
      this.name = ''
      this.$refs.attrSearch.clear()
      this.search()
    },

    close() {
      this.dialogVisible = false
    },

    $show(name) {
      this.dialogVisible = true
      this.name = ''
      this.$nextTick(() => {
        this.$refs.attrSearch.clear()
        this.search()
      })
    },

    choose(v) {
      const id = v.key_id
      console.log('skuids:', this.selectSkuIds)
      // 如果是已选中的 && 在已选数组中
      if (id !== this.cacheId && this.selectSkuIds.includes(id)) {
        return this.__notify('警告', '不能选择该商品', 'warning')
      }
      this.cacheId = id
      this.cacheObj = v
      this.update()
      this.close()
    },

    update() {
      this.$emit('getData', this.cacheObj)
    },

    setCache(data) {
      this.cacheObj = JSON.parse(JSON.stringify(data))
      this.cacheId = data.key_id
    },

    clearCache() {
      this.cacheObj = {}
      this.cacheId = ''
    }
  }
}
</script>

<style lang='less'>
.u-skuDialog {
  .form {
    .form-item {
      width: 50%;
      margin-right: 0;
      .el-form-item__content {
        width: 100%;
      }
    }
  }
  &-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .on {
    font-weight: bold;
  }
}
</style>